<!doctype html>
<html>
<head>
    <title>iscroll中的回到顶部</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!--demo展示所用css，不用关心 begin-->
    <link rel="stylesheet" type="text/css" href="../../../assets/reset.css" />
    <!--demo展示所用css end-->
    <!--组件依赖css begin-->
    <link rel="stylesheet" type="text/css" href="../../../assets/widget/gotop/gotop.css" />
    <!--组件依赖css end-->
    <!--组件依赖js begin-->
    <script type="text/javascript" src="../../../dist/zepto.js"></script>
    <script type="text/javascript" src="../../../src/core/gmu.js"></script>
    <script type="text/javascript" src="../../../src/core/event.js"></script>
    <script type="text/javascript" src="../../../src/core/widget.js"></script>
    <script type="text/javascript" src="../../../src/extend/fix.js"></script>
    <script type="text/javascript" src="../../../src/extend/throttle.js"></script>
    <script type="text/javascript" src="../../../src/extend/event.scrollStop.js"></script>
    <script type="text/javascript" src="../../../src/extend/event.ortchange.js"></script>
    <script type="text/javascript" src="../../../src/extend/matchMedia.js"></script>
    <script type="text/javascript" src="../../../src/widget/gotop/gotop.js"></script>
    <script type="text/javascript" src="../../../src/widget/gotop/$iscroll.js"></script>
    <!--组件依赖js end-->

    <!--demo展示所用js begin-->
    <script type="text/javascript" src="../../../src/extend/iscroll.js"></script>
    <!--demo展示所用js end-->
    <style type="text/css">
        #main {
            height: 360px;
        }
        #thelist{
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            text-align: left;
        }

        #thelist li {
            height:44px;
            line-height:44px;
            color:#333;
            border-bottom: 1px solid #e7e7e7;
            background-color: #fafafa;
            font-size: 16px;
            font-weight:bold;
            padding: 0 10px;
        }
    </style>
</head>
<body>
<div id="main">
    <div id="thelist" >
    </div>
</div>
<div id="gotop"></div>

<script>
    //填充页面
    for(var i = 0, html = []; i < 50; i++) {html.push('<li>第 ' + i + ' 行</li>');}
    $('#thelist').html(html.join(''));
    //创建iScroll
    var iScroll_1 = new iScroll('main');

    //创建组件
    $('#gotop').gotop({
        iScrollInstance: iScroll_1,      //将iscroll实例传入
        position: {
            top: 300
        }
    });
</script>
</body>
</html>
